<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
    <title>Document</title>
    <link rel="stylesheet" href="../css/game.css"/>
    <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
    <script src="../interface/interface.js"></script>
    <script src="../js/addon.min.js"></script>
    <script src="../unis/preg_config.js"></script>

    <link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
    <script src="../jquery.js" type="text/javascript"></script>
    <script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
    <script src="../cordova.js" type="text/javascript"></script>

    <script type="text/javascript">
	$(document).ready(function(){
			document.addEventListener("deviceready", myDeviceReadyListener, false);
	});
	var media='';
	var timer='';
 	myDeviceReadyListener = function(){


		<!--var src = "/mnt/sdcard/51job/梦然 - 没有你陪伴真的好孤单 [mqms2].mp3";-->
		var src = "file:///android_asset/www/audio/bgm.m4a";
		//var src = "http://www.57lehuo.com/nrg.mp3"
		media = new Media(src, mediaSuccess, mediaError, mediaStatus);
		//开始播放
		//$('#btn_play').click(function(){
			play();
	//	});

		//暂停播放
		$('#btn_pause').click(function(){
			pause();
		});
		//停止播放
		$('#btn_stop').click(function(){
			stop();
		});
		//恢复播放
		$('#btn_resume').click(function(){
			play();
		});

		//跳转到100秒
		$('#goto100').click(function(){
			goto100();
		})

		//volumeUp
		$('#volumeUp').click(function(){
			volumeUp();
		})
		$('#volumeDown').click(function(){
			volumeDown();
		})
	}

    // 监听播放状态
    function addLenisten(){


    }


	//跳转到100秒
	function goto100(){
		if(media!==''){
			media.seekTo(100000)//默认是毫秒数
		}
	}
	//增加音量

	function volumeUp(){
		media.setVolume('1.0')
	}
	//减少音量
	function volumeDown(){
		media.setVolume('0.3')
	}
	//播放音频 或者恢复播放
	function play(){
		if(media!=''){
			media.play();
			if(timer==''){
			    var pos = '';
				timer=setInterval(function(){
					media.getCurrentPosition(function(position){
						if(position>0){
						    pos = position;
							$('#txt_position .ui-btn-text').text('当前播放到'+position+'秒');
						}
					}, function(err){
						console.log('获取当前位置失败');

					});//获取当前的一个位置

					//获取总长度
					var media_length=media.getDuration();
					if(media_length>0){
						$('#txt_duration .ui-btn-text').text('当前音频的总长度为'+media_length+'秒');
					}
                    if(parseInt(pos)==parseInt(media_length)){

                           play();
                    }
				},1000);

			}
		}
	}
	//停止播放
	function stop(){
		if(media!=''){
			media.stop();
			media.release();//释放底层资源
			if(timer!=''){
				clearInterval(timer);  //清楚定时器
			}
			timer='';
			//当前位置变为0秒
			$('#txt_position .ui-btn-text').text('当前播放到0秒');
		}
	}
	//暂停播放
	function pause(){
		if(media!=''){
			media.pause();
		}
	}


	//当一个Media对象完成当前的播放、录制或停止操作时触发的回调函数
	function mediaSuccess(){
		console.log('当一个Media对象完成当前的播放、录制或停止操作时触发的回调函数');
	}
	//失败的回调函数
	function mediaError(error) {
           console.log('code: '    + error.code    + '\n' +
                  'message: ' + error.message + '\n');
   }
   	//状态改变的回调函数
   	function mediaStatus(){
   		console.log('状态改变的回调函数');
   	}

</script>
</head>
<body>
<div role="host"></div>

<audio id="bgyingyue"  src="../audio/bgm.m4a" autoplay="autoplay" loop="loop"></audio>



<!--
<audio id="bgyingyue"  src="file:///android_asset/www/audio/bgm.m4a" autoplay="autoplay" loop="loop"></audio>
-->

    <div class="content">
        <img src="../imgs/logoutBg.png" alt=""/>
    </div>
<div class="main">
    <div class="top">
        <div class="top_top">
            <!--<div class="header">-->
                <!--<p>今天是个重大的日子！</p>-->
            <!--</div>-->
            <div class="setting">
                <ul>
                    <li>
                        <img src="../imgs/setting.png" alt=""/>
                    </li>
                    <li>
                        <img src="../imgs/chat.png" alt=""/>
                    </li>
                </ul>
            </div>
        </div>
        <div class="left" style="position: relative">
            <div class="leftTitle"  >
               <img class="leftImg" src="../imgs/default_avatar.png" alt=""/>
                <div class="leftText">
                    <p class="leftName" style="color: #ffffff">ts</p>
                    <p class="leftNumber" style="color: #f8d107 ">1000</p>
                </div>
            </div>
                <ul class="leftPais">
                    <li class="leftPai">
                        <img src="../imgs/pai_left.png" alt=""/>
                    </li>
                </ul>
                <ul class="leftoverpais">
                        <!--<li>-->
                            <!--<img src="../imgs/pai_65.png" alt=""/>-->
                        <!--</li>-->

                </ul>
        </div>
        <div class="center">
                <div class="centerImg">
                    <p  style="border-radius:10px;padding:0 10px;font-size:0.7rem;background: #1c5523; color: #16e868 ; float: left;position: relative;top:50%;margin-top: -11.5px;margin-left: 6%;">还剩<span id="shengyupai" style="color: #f8d107 ">74</span>张</p>
                    <img src="../imgs/timer_bg.png" alt=""/>
                    <img class="dataId" id="leftdata" tt="0" style="display: none" dataId="1" src="../imgs/t3.png" alt=""/>
                    <img class="dataId" id="mydata" tt="1" style="display: none" dataId="2" src="../imgs/t2.png" alt=""/>
                    <img class="dataId" id="rightdata" tt="2" style="display: none" dataId="3" src="../imgs/t1.png" alt=""/>
                    <p class="time">30</p>
                    <p  style="border-radius:10px; padding:0 10px; font-size:0.7rem;background: #1c5523; color: #16e868 ;float:right;position: relative;top:50%;margin-top: -11.5px;margin-right: 10%;">还剩<span style="color: #f8d107 ">7</span>局</p>
                </div>
        </div>
        <div class="right" style="position: relative" >
            <div class="RightTitle" >
                <img class="rightImg" src="../imgs/default_avatar.png" alt=""/>
                <div class="RightText">
                    <p class="rightName" style="color: #ffffff">ts</p>
                    <p class="rightNumber" style="color: #f8d107 ">1000</p>
                </div>
            </div>
            <ul class="RightPais" style="position: relative;left:20px;">
                <li class="RightPai">
                    <img src="../imgs/pai_Right.png" alt=""/>
                </li>
            </ul>
            <ul class="rightoverpais">
                <!--<li>-->
                    <!--<img src="../imgs/pai_65.png" alt=""/>-->
                <!--</li>-->

            </ul>
        </div>
    </div>
    <div class="footer">
        <div class="MyTitle">
            <img class="footerImg" src="../imgs/default_avatar.png" alt=""/>
            <div class="MyText">
                <p class="footerName" style="color: #ffffff">ts</p>
                <p class="footerNumber" style="color: #f8d107 ">1000</p>
            </div>
        </div>
        <ul class="mypengPai" style="display: none">

        </ul>
        <ul class="MyPai">
        </ul>
        <ul class="MyPais">
            <li>
                <img src="../imgs/1-a.png" alt=""/>
            </li>
        </ul>
    </div>
</div>
<div class="RoomNumber">
    <p style="color: #01fcd0">09 11</p>
    <p>房间号</p>
    <p class="roomInfo">673377</p>
    <p>卡五星</p>
    <p>襄阳玩法</p>
</div>
    <div class="Myplay">
        <ul class="mplay">

        </ul>
    </div>
<div id="over" >
    <img  class="_bg" src="../imgs/over_bg.png" alt=""/>
    <div class="over_main">
            <div class="over_top">
                <p class="over_time">
                    2016-8-12 10:58:11
                </p>
                <p class="over_hoom">
                    房间号:6733777 局数:1/8
                </p>
            </div>
        <div class="over_center">
            <dl class="pai_dls">
                    <dt class="oneName" style="float:left">ss</dt>
                    <dd class="hupais_list">
                        <ul>
                            <li class="oneImg">

                            </li>
                        </ul>
                        <div class="h">
                            <img  class="hImg" src="../imgs/h.png" alt=""/>
                        </div>
                        <div style="float: left;width: 20% ;font-size: 0.7rem; color: #ffffff;margin-top: 1%">
                            <div class="jifan">
                                <p>2</p>
                                <p>翻</p>
                            </div>
                            <div style="float: left;">
                                    <p>杠分</p>
                                    <p>0</p>
                            </div>
                            <div  style="float: right;margin-right: 20%;">
                                <p>总分</p>
                                <p>+0</p>
                            </div>
                        </div>
                    </dd>
                </dl>
            <dl class="pai_dls">
                <dt class="towName" style="float:left;position: fixed;z-index: 100; top:35%">ss</dt>
                <dd class="hupais_list">
                    <ul>
                        <li class="toImg">

                        </li>
                    </ul>
                    <div class="h">
                        <img  class="hImg" src="../imgs/h.png" alt=""/>
                    </div>
                    <div style="float: left;width: 20% ;font-size: 0.7rem; color: #ffffff;margin-top: 1%">
                        <div class="jifan">
                            <p>2</p>
                            <p>翻</p>
                        </div>
                        <div style="float: left;">
                            <p>杠分</p>
                            <p>0</p>
                        </div>
                        <div  style="float: right;margin-right: 20%;">
                            <p>总分</p>
                            <p>+0</p>
                        </div>
                    </div>
                </dd>
            </dl>
            <dl class="pai_dls">
                <dt style="float:left;position: fixed;z-index: 100; top:50%">ss</dt>
                <dd class="hupais_list">
                    <ul>
                        <li class="sImg">

                        </li>
                    </ul>
                    <div class="h" >
                        <img style="visibility:visible"  class="hImg" src="../imgs/h.png" alt=""/>
                    </div>
                    <div style="float: left;width: 20% ;font-size: 0.7rem; color: #ffffff;margin-top: 1%">
                        <div class="jifan" style="visibility:visible">
                            <p>2</p>
                            <p>翻</p>
                        </div>
                        <div style="float: left;">
                            <p>杠分</p>
                            <p>0</p>
                        </div>
                        <div  style="float: right;margin-right: 20%;">
                            <p>总分</p>
                            <p>+0</p>
                        </div>
                    </div>
                </dd>
            </dl>
        </div>
        <div class="over_footer">
            <ul style="position: absolute;bottom: 18%;width: 100%;">
                <li style="text-align: center" class="startread">
                    <img class="startGame" src="../imgs/an1.png" alt=""/>
                </li>
                <li style="text-align: left">
                    <img src="../imgs/an2.png" alt=""/>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="blockHupai" style="display:none;width:100%;height:100%;position: fixed; z-index: 14;left:50%;top:50%;margin-left: -10%;margin-top: 5%">
    <img style="width: 30%" src="../imgs/hublock.png" alt=""/>
</div>
<div id="blockpeng" style="display:none;width:100%;height:100%;position: fixed; z-index: 14;left:50%;top:50%;margin-left: -20%;margin-top: 5%">
    <img style="width: 20%" src="../imgs/p-04.png" alt=""/>
    <img style="width: 20%" src="../imgs/p-05.png" alt=""/>
</div>
<div id="blockgang" style="display:none;width:100%;height:100%;position: fixed; z-index: 14;left:50%;top:50%;margin-left: -32%;margin-top: 5%">
    <img style="width: 20%" src="../imgs/p-04.png" alt=""/>
    <img style="width: 20%" src="../imgs/gang.png" alt=""/>
    <img style="width: 20%" src="../imgs/p-05.png" alt=""/>
</div>
<div id="blockliang" style="display:none;width:100%;height:100%;position: fixed; z-index: 14;left:50%;top:50%;margin-left: -10%;margin-top: 5%">
    <img style="width: 20%" src="../imgs/liang.png" alt=""/>
    <img style="width: 20%" src="../imgs/p-05.png" alt=""/>
</div>
<div class="dianjizhezao"></div>
<div id="loddingrole" style="display:none;z-index:1000;width:100%;height:100%;position:fixed;background:rgba(0,0,0,0);text-align: center;padding-top: 20%">等待玩家链接....</div>
</body>
<script src="../js/game.js"></script>
<script>




</script>

</html>